import React from 'react'
import { Menu, Button, Input, } from '../ui-components'
import style from './style'
import Code from './Code'

export default () => (
	<div className={style.root}>
		<Code>{'<Menu size={..} data={[...]} [,left, right]>'}</Code>
		<div>
			<Menu
				lowerRight
				label="lowerRight"
				size='16'
				icon={false}
				data={
					[
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						}
					]
				}
			/>
		</div>
		<div>
			<Menu
				lowerLeft
				label="lowerLeft"
				size='16'
				icon={false}
				data={
					[
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						}
					]
				}
			/>
		</div>
		<div>
			<Menu
				topLeft
				label="topLeft"
				size='16'
				icon={false}
				data={
					[
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						}
					]
				}
			/>
		</div>
		<div>
			<Menu
				topRight
				label="topRight"
				size='16'
				icon={false}
				data={
					[
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						}
					]
				}
			/>
		</div>
		<div>
			<Menu
				lowerLeft
				size='16'
				icon={false}
				data={
					[
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						},
						{ 
							name: '删除', 
							value: 'delete', 
							handler: () => {console.log('delete')} 
						}
					]
				}
			>
				<Button
					label="切换"
					blueLine
				/>
			</Menu>
		</div>
		<div>
			<Menu
				lowerLeft
				size='16'
				icon={false}
				label="test body"
				height="100"
				width="200"
				body={
					() => (
						<div style={{
							display: 'flex',
							flexDirection: 'column',
						}}>
							<Input label="搜索联系人.." style={{
								marginTop: '20px'
							}}/>
							<Button label="提交"/>
						</div>
					)
				}
			/>
		</div>
	</div>
)
